<!--发布文章页面-->
<template style="background-color: white">
  <div class="header">
    <el-row style="background-color: white">
      <el-col :span="3">
          <el-image style="height: 100px;width: auto;margin-left: 10px;margin-top: -5px"  src="image/login/DADARecipes.jpg"></el-image>
      </el-col>
      <el-col :span="12" :offset="20" style="margin-top: -85px;position: relative;">
        <!-- 显示用户的头像和用户名-->
           <el-image class="imgControl" :src="baseUrl+userInfo.imgUrl"></el-image>
        <el-dropdown trigger="click">
          <span style="margin-left: 10px;margin-top:20px;font-size: 20px;font-weight: bold;">{{userInfo.username}}<el-icon style="left: 5px;top: 3px"><ArrowDown /></el-icon></span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="navigateToUserMessage"><el-icon><User /></el-icon>个人中心</el-dropdown-item>
              <el-dropdown-item @click="ArticleManage"><el-icon><EditPen /></el-icon>笔记管理</el-dropdown-item>
              <el-dropdown-item @click="logout"><el-icon><SwitchButton /></el-icon>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>

  <div style="margin-top:-19px;margin-left:-17px;width: 1480px;" >
    <el-row style="background-color:#fff;">
      <el-col :span="24">
        <!--发布文章按钮-->
        <el-button type="primary" plain round style="margin-left: 10px;width: 120px;height: auto">保存草稿</el-button>
        <el-button type="primary" plain round style="margin-left: 10px;width: 120px;height: auto" @click="publishArticle">发布笔记</el-button>
        <el-button type="primary" plain round style="margin-left: 10px;width: 120px;height: auto" @click="navigateToHome">返回</el-button>
      </el-col>
    </el-row>
  </div>
  <div class="container">
  <!--左边的div内容-->
  <div class="left-column">
    <el-row style="background-color:#fff;">
      <el-col :span="24" style="margin-top: 10px;margin-left: 10px">
        <el-card style="width: 700px">

          <el-form>
            <el-form-item label="笔记标题">
              <el-input placeholder="请填写笔记标题" v-model="articleData.title" style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item label="笔记摘要">
              <el-input type="textarea" placeholder="请填写一段笔记概述" v-model="articleData.articleSummary"
                        style="width: 30%" :autosize="{minRows: 3}"></el-input>
            </el-form-item>

              <el-row>
                <el-col :span="8">
                  <el-form-item label="添加图片">
                    <el-upload
                        v-model:file-list="fileList"
                        v-model:action="actionUrl"
                        name="file"
                        limit="1"
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove"
                    >
                      <el-icon>
                        <Plus/>
                      </el-icon>
                    </el-upload>
                  </el-form-item>
                </el-col>
              </el-row>
            <el-form-item label="笔记内容">
              <el-input type="textarea" v-model="articleData.content" :autosize="{minRows: 10}"></el-input>
            </el-form-item>
            <el-form-item>
              <!--设置默认值为0代表仅自己可见，当点击复选框，则将文章状态设置为1，代表他人可见-->
              <el-radio v-model="articleData.articleStatus" label="0">仅自己可见</el-radio>
              <el-radio v-model="articleData.articleStatus" label="1">他人可见</el-radio>
            </el-form-item>

          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <!--右边的div内容-->
  <div class="right-column" style="background-color: white;"></div>
    <el-row style="background-color: white">
       <el-col>
         <el-card style="background-color: beige;width: 410px">
           <el-form>
             <el-form-item label="今日食材" label-position="top" style="font-weight: bold;font-size: 22px">
               <el-carousel style="width: 400px;height: auto">
                  <el-carousel-item>
                    <img src="/image/login/carrot1.jpeg" class="carousel-image">
                  </el-carousel-item>
                 <el-carousel-item>
                   <img src="/image/login/carrot2.jpeg" class="carousel-image">
                 </el-carousel-item>
               </el-carousel>
             </el-form-item>
             <el-form-item>
               <p>{{dailyVegetable[0].des}}</p>
             </el-form-item>
           </el-form>
         </el-card>
       </el-col>
    </el-row>
  </div>
</template>

<script setup>

/*定义对象用于存储当前登录用于的信息*/
import {onMounted, ref} from "vue";
import router from "@/router";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

const baseUrl = getBaseUrl();
var urlParams = new URLSearchParams(window.location.search);
var articleId = urlParams.get("id");
const user =ref(getUser());

//使用localstorage获取当前用户登录的信息
const userData = JSON.parse(localStorage.getItem('user'))
const userId = ref("")

const BASE_URL = getBaseUrl();

//定义变量用于存储当前登录的用户的信息
const userInfo = ref({})

//调用方法查询后端获取用户信息
//定义方法用于向后端发送查询个人用户信息数据
const queryMessage =()=>{
  userId.value=userData.id;
  axios.get(BASE_URL+'/v1/user/queryMessage/'+userId.value).then((response)=>{
    if(response.data.code===2000){
      //将数据赋值给userData
      userInfo.value=response.data.data[0];
    }else{
      ElMessage.error("用户信息查询失败!");
    }
  })
}

onMounted(()=>{
  //调用方法查询用户信息
  queryMessage();
})

/*定义对象用于存储发布的文章*/
const articleData = ref({
  userId:user.value.id,
  title:'',
  articleSummary:'',
  content:'',
  imgUrl:'',
  videoUrl:'',
  position:'',
  articleStatus:''
})
/*定义数组用于存储每日推荐食材图片及功效内容*/
const dailyVegetable = ref([
  {
    imgUrl:['image/login/carrot1.jpeg','image/login/carrot2.jpeg'],
    des:'胡萝卜是一种营养丰富的蔬菜，富含β-胡萝卜素、维生素A、钾和膳食纤维等多种营养成分。' +
        '它有助于保护视力、增强免疫系统、促进皮肤健康、降低心血管疾病风险、改善消化系统功能、具有抗癌作用、促进骨骼健康、控制血糖、抗炎以及维护口腔健康。'
  }
])
/**
 * 定义方法回显文章数据
 * */
const echoArticleData =()=>{
  //使用axios向后端发送请求
  axios.get(BASE_URL+'/v1/article/details/select?articleId='+articleId+'&userId='+user.value.id).then((response)=>{
    //对response的返回code进行判断
    if(response.data.code===2000){
      //获取文章数据
      articleData.value=response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
};
//如果传过来的文章id不为空 就回显
if(articleId!==null){
  echoArticleData();
}
// onMounted(()=>{
//     echoArticleData();
// })
/*定义方法用于返回User页面*/
const navigateToHome =()=>{
  //清空发布文章的数据
  articleData.value={};
  //跳转到User的页面
  router.push('/community');
}
/*定义方法用于发布文章*/
const publishArticle =()=>{
  if(fileList.value.length>=1){
    articleData.value.imgUrl=fileList.value[0].response.data;
  }
  //使用qs将数据转为字符串格式
  let data = qs.stringify(articleData.value);
  //使用axios向后端发送请求
  axios.post(BASE_URL+'/v1/article/insert/',data).then((response)=>{
    //对response的返回code进行判断
    if(response.data.code===2000){
      //提示用户文章发布成功
      ElMessage.success("发布成功");
      //清空发布文章的数据
      articleData.value={}
      //跳转到User页面
      router.push('/user');
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}
/*定义方法跳转到个人信息更新页面*/
const navigateToUserMessage=()=>{
  //跳转到UserMessage页面
  router.push('/UserMessage');
}

//定义方法用于退出登录
const logout=()=>{
  //提示用户是否确认要退出登录当前用户
  if(confirm("确认要退出登录吗?")){
    //清空localStorage的用户信息
    localStorage.removeItem("user");
    //跳转到登录的页面
    router.push('/login');
  }
}

//ArticleManage 管理我的文章 跳转的User页面
const ArticleManage =()=>{
  //清空文章表格数据
  articleData.value=[];
  //跳转到User页面
  router.push('/user');
}

const dialogImageUrl = ref('');
const fileList = ref([]);
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们要删除的那个图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/delete?imgUrl='+imgUrl)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
        }
      })
}

//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  console.log(uploadFile);
}

const actionUrl = BASE_URL+'/v1/file/upload';







</script>

<style scoped>
/*定义走马灯图片的大小问题*/
.carousel-image{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例并填充容器 */
}

/*定义整个div容器样式*/
.container{
  display: flex;
  margin-left: -16px;
  margin-top: 0px;
  width: 1450px;
  height: 700px;
  background-color: white;
  justify-content: space-between; /* 水平对齐方式 */
}

/*定义左边div容器样式*/
.left-column{
  flex: 1;
  display: flex;
  flex-direction: column;

}

/*定义右边div容器样式*/
.right-column{
  flex: 1;
  display: flex;
  flex-direction: column;
}

/*定义头像图片的类选择器*/
.imgControl{
  border: 1px solid white; /*设置边框*/
  border-radius: 50%; /*圆形*/
  width: 65px; /* 设置宽度 */
  height: 65px; /* 设置高度 */
  object-fit: cover; /* 确保图片填充整个容器 */
}
/*定义header的样式*/
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: white;
}

</style>